<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="车位租售" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style=" background-color: #F2F3F5;">
			<view style="height: 25rpx;"></view>
			<view class="uni-cell-90" style="margin-top: 35rpx;">
				<view :class="current == 0 ? 'iconType1' : 'iconType2'">
					<view class="text1" @click="current = 0">
						物业托管
					</view>
					<view class="text2" @click="current = 1">
						个人租售
					</view>
				</view>
			</view>

			<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<view class="uni-flex-center" style="width: 96%; margin-left: 2%; font-weight: 600;">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx;">
								<u-form-item label="租售车位" prop="userInfo.park" labelWidth="70" borderBottom
									@click="showPark = true">
									<u-input disabled v-model="model1.userInfo.park" placeholder="请填写租售车位"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
										<template slot="suffix">
											<u-icon name="arrow-right"></u-icon>
										</template>
									</u-input>
								</u-form-item>
								<u-form-item label="租售费用" prop="userInfo.fee" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.fee" placeholder="请填写租售费用" border="none"
										style="background-color: #FFFFFF;">
										<template slot="suffix">
											<text
												style="color: #333333; font-size: 32rpx; padding-right: 20rpx;">元/月</text>
										</template>
									</u-input>
								</u-form-item>
								<u-form-item label="租售期限" prop="userInfo.during" labelWidth="70" borderBottom
									@click="showDuring = true">
									<u-input disabled v-model="model1.userInfo.during" placeholder="请填写租售期限"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
										<template slot="suffix">
											<u-icon name="arrow-right"></u-icon>
										</template>
									</u-input>
								</u-form-item>
								<u-form-item label="联系人" prop="userInfo.name" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name" placeholder="请填写联系人" border="none"
										style="background-color: #name;"></u-input>
								</u-form-item>
								<u-form-item label="联系电话" prop="userInfo.tel" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.tel" placeholder="请填写联系电话" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
							</view>
						</view>
					</view>
				</view>
				<u-action-sheet :show="showPark" :actions="actionsPark" title="请选择车位" @close="showPark = false"
					@select="parkSelect">
				</u-action-sheet>
				<u-action-sheet :show="showDuring" :actions="actionsDuring" title="请选择租售期限" @close="showDuring = false"
					@select="duringSelect">
				</u-action-sheet>
			</u-form>
			<u-button :customStyle="btnStyle" @click="">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPark: false,
				showDuring: false,
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',

					position: 'fixed',
					bottom: '40rpx'
				},
				current: 0,
				model1: {
					userInfo: {
						park: '',
						fee: '',
						during: '',
						name: '',
						tel: ''
					}
				},
				actionsPark: [{
						name: 'A-001'
					},
					{
						name: 'A-002'
					}
				],
				actionsDuring: [{
						name: 1,
					},
					{
						name: 2,
					},
					{
						name: 3,
					},
					{
						name: 4,
					},
					{
						name: 5,
					},
					{
						name: 6,
					},
					{
						name: 7,
					},
					{
						name: 8,
					},
					{
						name: 9,
					},
					{
						name: 10,
					},
					{
						name: 11,
					},
					{
						name: 12,
					}
				]
			}
		},
		methods:{
			parkSelect(e){
				this.model1.userInfo.park = e.name;
			},
			duringSelect(e){
				this.model1.userInfo.during = e.name;
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 98%;
		margin-left: 1%;
		margin-bottom: 44rpx;
	}

	.card-head {
		border-radius: 20rpx;
	}

	.iconType1 {
		display: flex;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url("https://s4.ax1x.com/2022/02/22/HxzFJK.png");
		background-size: 100% 100%;

		.text1 {
			color: #FFFFFF;
			text-align: center;
			width: 50%;
		}

		.text2 {
			color: #0B868E;
			text-align: center;
			width: 50%;
		}
	}

	.iconType2 {
		display: flex;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url("https://s4.ax1x.com/2022/02/22/HxzkRO.png");
		background-size: 100% 100%;

		.text1 {
			color: #0B868E;
			text-align: center;
			width: 50%;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 50%;
		}
	}

	.iconType {
		display: flex;
		padding: 30rpx 60rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		justify-content: space-between;
	}

	.icon {
		height: auto;
		margin-bottom: 10rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}
</style>
